<script>
import {onMounted, reactive, ref, toRefs} from "vue";

export default {
  setup(){
    const verify = ref(null);
    const state = reactive({
      pool: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', //字符串
      width: 120, // 默认画布宽度
      height: 40, // 默认画布高度
      imgCode: ''
    })
    onMounted(() => {
      // 初始化绘制图片验证码
      state.imgCode = draw()
    })
    // 单击图片重新绘制方法
    const handleDraw = () => {
      state.imgCode = draw()
    }
    // 生成随机数方法
    const randomNum = (min,max) => {
      return parseInt(Math.random()*(max-min)+min)
    }
    // 生成随机颜色方法
    const randomColor = (min,max) => {
      return `rgb(${randomNum(min,max)},${randomNum(min,max)},${randomNum(min,max)})`
    }
    // 绘制图片验证码方法
    const draw = () => {
      // 获取画布
      const ctx = verify.value.getContext('2d')
      // 清空画布
      // ctx.clearRect(0, 0, state.width, state.height);
      // 填充随机颜色
      ctx.fillStyle = randomColor(180,230)
      // 设置画布的形状和宽、高
      ctx.fillRect(0,0,state.width,state.height)
      // 定义一个画布内的字符变量
      let imgCode = ''
      // 随机产生字符串并且随机旋转
      for(let i = 0; i < 4; i++){
        // 随机生成四个字符
        const text = state.pool[randomNum(0,state.pool.length - 1)]
        imgCode += text
        // 随机设置画布内字符的字号
        const fontSize = randomNum(18,40)
        // 字符随机的旋转角度
        const deg = randomNum(-30,30)
        // 动态间距
        // const offsetX = fontSize + 10;
        ctx.font = fontSize + 'px SimHei'
        // ctx.font = `${fontSize}px SimHei, Arial, sans-serif`;
        ctx.textBaseline = 'top'
        ctx.fillStyle = randomColor(80,150)
        ctx.save()
        // 随机旋转字符串
        ctx.translate(30 * i + 15, 15)
        ctx.rotate(deg * Math.PI / 180)
        // fillText()方法用于在画布上绘制填色的文本。文本的默认颜色是黑色
        // 使用font属性定义字体和字号，并使用fillstyle属性以另一种颜色/渐变渲染文本
        ctx.fillText(text,-15+5,-15)
        ctx.restore()
      }
      // 随机生成五条干扰线，干扰线的颜色要浅一点
      for(let i = 0; i < 5; i++){
        ctx.beginPath()
        ctx.moveTo(randomNum(0,state.width),randomNum(0,state.height))
        ctx.lineTo(randomNum(0,state.width),randomNum(0,state.height))
        ctx.strokeStyle = randomColor(180,230)
        ctx.closePath()
        ctx.stroke()
      }
      // 随机生成40个干扰小点
      for(let i = 0; i < 40; i++){
        ctx.beginPath()
        ctx.arc(randomNum(0,state.width),randomNum(0,state.height),1,0,2*Math.PI)
        ctx.closePath()
        ctx.fillStyle = randomColor(150,200)
        ctx.fill()
      }
      // 最终返回随机生成的验证码，也就是四个字符
      return imgCode
    }
    return {
      ...toRefs(state),
      verify,
      handleDraw
    }
  }
}
</script>

<template>
  <div class="img-verify">
    <!--canvas画布-->
    <canvas ref="verify" :width="width" :height="height" @click="handleDraw"></canvas>
  </div>
</template>

<style scoped>
.img-verify canvas {
  cursor: pointer;
}
</style>